
<template>
    <div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()">
        <div class="slideshow">
            <transition-group tag="ul" name="image">
                <li v-for="(list, index) in lists" v-show="index===mark" :key="index">
                    <a href="#">
                        <img :src="list.imgurl" @click="openurl(list.url)">
                    </a>
                </li>
            </transition-group>
        </div>
        <div class="bar">
      <span v-for="(item, index) in lists" :class="{ 'active':index===mark }"
            @mouseenter="change(index)" :key="index"></span>
<!--            @click="click"     ////单击-->
<!--            @mousedown="down"       ////按下-->
<!--            @mouseup="up"          ////抬起-->
<!--            @dblclick="dblclick"      ////双击-->
<!--            @mousemove="move"     ////移动-->
<!--            @mouseleave="out"        ////离开-->
<!--            @mouseout ="out"         ////移出-->
<!--            @mouseenter="enter"     ////进入-->
<!--            @mouseover="enter"        ////在-->
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                timer: null, //定时器
                mark: 0, //比对图片索引的变量
            }
        },
        props:{
            lists:{}
        },
        methods: {
            autoPlay () {
                this.mark++;
                if (this.mark === this.lists.length) {
                    this.mark = 0
                }
            },
            play () {
                this.timer = setInterval(this.autoPlay, 2500)
            },
            change (i) {
                this.mark = i
            },
            stop () {
                clearInterval(this.timer)
            },
            move () {
                this.timer = setInterval(this.autoPlay, 2500)
            },
            openurl (url) {
                console.log(url)
                window.open(url)
            }
        },
        created () {
            this.play()
        }
    }
</script>


<style scoped>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .slide {
        width: 100%;
        height: 720px;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
    }
    .slideshow {
        width: 100%;
        height: 720px;
    }
    .slideshow ul{
        width:100%;
        height: 720px;
    }
    li {
        width:100%;
        position: absolute;
    }
    .slideshow ul a{
        display: inline-block;
        width:100%;
    }
    img {
        width: 100%;
        height: 720px;
    }
    .bar {
        position: absolute;
        width: 100%;
        bottom: 10px;
        margin: 0 auto;
        z-index: 10;
        text-align: center;
    }
    .bar span {
        width: 10px;
        height: 10px;
        border-radius:50%;
        background: white;
        display: inline-block;
        margin-right: 10px;
    }
    .active {
        background: red !important;
    }
    .image-enter-active {
        transform: translateX(0);
        transition: all 1.5s ease;
    }
    .image-leave-active {
        transform: translateX(-100%);
        transition: all 1.5s ease;
    }
    .image-enter {
        transform: translateX(100%);
    }
    .image-leave {
        transform: translateX(0);
    }

</style>


